<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org xmlns:shiro=http://www.pollix.at/thymeleaf/shiro>
<head>
    <meta charset="UTF-8">
    <title>订单</title>
    <link rel="stylesheet" th:href="@{/css/dingdan.css}"/>
</head>


<script th:src="@{/js/jq.js}"></script>
<body>
 <div class="my">
     <form action="/html/dingh">
         <input type="hidden" name="uid" th:value="${session.id}"/>
         <input type="hidden" name="rooname" th:value="${d[0].getRoomname()}"/>
         <table>
             <tr>
                 <td style="text-align: right">
                    房间名字：
                 </td>
                 <td>
                     <label th:text="${d[0].getRoomname()}" th:name="roomname"></label>
                 </td>
             </tr>
             <tr>
                 <td style="text-align: right">
                     入住日期：
                 </td>
                 <td>
                     <input type="date" id="ru" name="ru"/>
                 </td>
             </tr>
             <tr>
                 <td style="text-align: right">
                     退房日期：
                 </td>
                 <td>

                     <input type="date" id="tui" name="tui"/>
                 </td>
             </tr>
             <tr>
                 <td style="text-align: right">
                     楼层：
                 </td>
                 <td>
                     <label th:text="${d[0].getLou()}" th:name="lou"></label>
                 </td>
             </tr>
             <tr>
                 <td style="text-align: right">
                     房间号：
                 </td>
                 <td>
                     <select name="fh">
                         <option th:each="ff:${f}" th:text="${ff.getFh()}" th:selected="${ff.getFh()}"></option>
                     </select>
                     <span>自选可预定房间</span>
                 </td>
             </tr>

             <tr>
                 <td style="text-align: right">
                     入住天数：
                 </td>
                 <td>

                    <!--<label id="day" name="day">0</label>-->
                     <input readonly type="text" id="day" name="day" value="0" onkeyup="this.value=this.value.replace(/\D|^0/g,'')" onafterpaste="this.value=this.value.replace(/\D|^0/g,'')">
                 </td>
             </tr>

             <tr>
                 <td style="text-align: right">
                     天/价：
                 </td>
                 <td>
                     <input type="hidden" th:value="${d[0].getPrice()}" readonly id="pr" >
                    <!-- <label id="pri" th:text="${d[0].getPrice()}" name="pri"></label>￥-->
                     <input readonly type="text" id="pri" th:value="${d[0].getPrice()}" name="pri" />￥
                 </td>
             </tr>


         </table>
         <label id="ti"></label>
         <button id="bt" type="submit">确认预定</button>
     </form>


 </div>

</body>
<script>
    $(function () {


        $("#ru").click(function () {
            $("#pri").val($("#pr").val())

        })
        $("#tui").click(function () {

            $("#pri").val($("#pr").val())


        })

        $("#bt").click(function () {
            if($("#ru").val()==""|| $("#tui").val()=="" ||  $("#day").val()==""){
                alert("请正确填写信息")
            }

        })


        $("#tui").blur(function () {
            var ru=$("#ru").val()
            if(ru==""){
                $("#ti").text("请选择完整日期")
            }else{

                $("#ti").text("")
                var ru = $("#ru").val();
                var y1=ru.split("-")[0];
                var m1=ru.split("-")[1];
                var d1=ru.split("-")[2];
                var t1=new Date(y1,m1,d1);

                var tui = $("#tui").val();
                var y2=tui.split("-")[0];
                var m2=tui.split("-")[1];
                var d2=tui.split("-")[2];
                var t2=new Date(y2,m2,d2);

                var t3=t2.getTime()-t1.getTime()


                if(t3/ (1000 * 3600 * 24)<0){
                    $("#ti").text("请正确选择日期")
                }else {
                    $("#ti").text("")
                    $("#day").val(t3/ (1000 * 3600 * 24));
                    var pp= $("#pri").val();
                   
                    $("#pri").val((t3/ (1000 * 3600 * 24))*Number(pp));
                }


/*

                $("#ti").text("")
                var ru = $("#ru").val().replace(/-/g,"");
                var tui = $("#tui").val().replace(/-/g,"");
                $("#day").text(Number (tui)-Number(ru))
*/

            }
        })
        $("#ru").click(function () {
            
        })


        $("#ru").blur(function () {
            var ru=$("#tui").val()
            if(ru==""){
                $("#ti").text("请选择日期")
            }else{
                $("#ti").text("")

                var ru = $("#ru").val();
                var y1=ru.split("-")[0];
                var m1=ru.split("-")[1];
                var d1=ru.split("-")[2];
                var t1=new Date(y1,m1,d1);

                var tui = $("#tui").val();
                var y2=tui.split("-")[0];
                var m2=tui.split("-")[1];
                var d2=tui.split("-")[2];
                var t2=new Date(y2,m2,d2);

                var t3=t2.getTime()-t1.getTime()


                if(t3/ (1000 * 3600 * 24)<0){
                    $("#ti").text("请正确选择日期")
                }else {
                    $("#ti").text("")
                    $("#day").val(t3/ (1000 * 3600 * 24));
                    var pp= $("#pri").val();
                    
                    
                    $("#pri").val((t3/ (1000 * 3600 * 24))*Number(pp));
                }


                /*   var ru = $("#ru").val().replace(/-/g,"");
                   var tui = $("#tui").val().replace(/-/g,"");
                   $("#day").text(Number (tui)-Number(ru))*/

            }
        })


    })
</script>
</html>